<template>
	<NavBarVue title="发布内容" />
	<view class="issue">
		<view class="content">
			<GridFileVue :isShowCamera="isShowCamera" :showList="fileList" :isShowDot="isShowDot" />
			<view class="title">
				<input type="text" placeholder="填写标题会有更多赞哦~" placeholder-style="color: #6D6D6D;font-size: 34rpx;"
					v-model="contentDetails.articleTitle" />
			</view>
			<textarea cols="30" rows="10" placeholder="添加正文"
				placeholder-style="color: #9D9D9D;font-size: 26rpx;font-weight: 36rpx;"
				v-model="contentDetails.articleDetail"></textarea>
			<view class="topic">
				<view class="topic_mark" @click="showPupop">
					<view class="choose-label"><text># 选择话题</text></view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="choose-label">
					<text>
						# {{chooseLabellist+':'+chooseChildLabellist}}
					</text>
				</view>
				<up-popup :show="show" mode="bottom" @close="close" class="tag-popup">
					<view style="display: flex;justify-content: space-between;padding: 30rpx 20rpx;align-items: center;">
						<text style="font-size: 14px;color: #a09fa4;" @click="close">取消</text>
						<text style="font-size: 16px;">选择话题标签</text>
						<text style="font-size: 14px;" @click="close">确定</text>
					</view>
					<view class="topic_label">
						<view class="u-wrap">
							<view class="u-menu-wrap">
								<scroll-view scroll-y scroll-with-animation class="u-tab-view" :scroll-top="scrollTop"
									:scroll-into-view="itemId">
									<view v-for="(item,index) in labelList" :key="index" class="u-tab-item"
										:class="[current == index ? 'u-tab-item-active' : '']" @click.stop="swichMenu(index, item)">
										<text class="u-line-1">{{item}}</text>
									</view>
								</scroll-view>
								<scroll-view scroll-y scroll-with-animation class="page-view" :scroll-top="scrollTop"
									:scroll-into-view="itemId">
									<view v-for="(item,index) in labelChildList" :key="index" class="u-tab-child-item"
										:class="[currentChild == index ? 'u-tab-item-active' : '']"
										@click.stop="swichChildMenu(index, item)">
										<text class="u-line-1">{{item}}</text>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
				</up-popup>
			</view>
			<up-input placeholder="输入店铺引流名称" border="bottom" clearable v-model="contentDetails.activityWord" maxlength="30">
				<template #suffix>
					{{contentDetails.activityWord.length}}/{{30}}
				</template>
			</up-input>
			<combox-search emptyTips="无数据" :candidates="candidates" placeholder="请选择店铺" @selectorClick="selectorClick"
				@onChange="onchange">
			</combox-search>
		</view>
		<button class="btn" :style="{bottom: safeAreaBottom + 'rpx'}" @click="publish_note">发布笔记</button>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		onMounted,
		reactive,
		ref,
		computed
	} from "vue"
	import GridFileVue from "@/components/GridFile.vue";
	import {
		useArticleStore,
		useShopStore,
		useTagLibraryStore
	} from '@/store'
	import {
		safeAreaBottom
	} from '@/utils/getMenuData'
	import {
		useCheckIfFileIsImageOrVideo
	} from '@/utils/useCheckIfFileIsImageOrVideo'
	import {
		MAP_KEY
	} from "@/config/config.ts"
	import comboxSearch from "@/components/combox.vue"
	import tabFloor from '@/components/TabFloor.vue'

	// 弹框
	const show = ref(false);

	function close() {
		// 关闭逻辑，设置 show 为 false  
		show.value = false;
		contentDetails.articleLabel = chooseChildLabellist.value
	}

	function showPupop() {
		console.log("showPupop");
		show.value = true
	}

	const fileList = ref([])
	const isShowCamera = ref(false)
	const isShowDot = ref(false)
	const articleStore = useArticleStore()
	const shopStore = useShopStore()
	onLoad((option) => {
		if (option?.item) {
			fileList.value = JSON.parse(option?.item)
		}
		const res = wx.getSystemInfoSync()
	})
	const contentDetails = reactive({
		accessCount: 0, 
		activityId: 0, 
		activityWord: "",
		articleCategoryId: 0, 
		articleCover: "",
		articleDetail: "",
		articleDigest: "", 
		articleLabel: "",
		articleMainPic: "",
		articleStatus: 1, 
		articleTitle: "",
		favoriteCount: 0,
		latitude: "",
		likeCount: 0,
		longitude: "",
		shopId: 1,
		source: 1,
	})

	onMounted(async () => {
		const res = await uni.getLocation({
			type: "wgs84"
		})
		contentDetails.latitude = res.latitude
		contentDetails.longitude = res.longitude
		await shopStore.shopGetAll({
			pageNo: 1,
			pageSize: 100,
		})
		contentDetails.articleLabel = chooseChildLabellist.value
	})


	let candidates = computed(() => {
		return shopStore.shopInfoData.shopList.map((item) => item.storeName).filter((item) => item.includes(storeName
			.value))
	})

	let storeName = ref('')
	const onchange = async (newVal) => {
		// await shopStore.shopGetAll({
		// 	businessId: 28,
		// 	pageNo: 1,
		// 	pageSize: 100,
		// 	storeName: newVal
		// })
		storeName.value = newVal
	}

	/*  #ifdef  MP-WEIXIN  */
	const citySelector = requirePlugin('citySelector');
	const showLocation = ref([])
	onShow(() => {
		const selectedCity = citySelector.getCity();
		if (!selectedCity) {
			const locationInfo = uni.getStorageSync("locationData")
			showLocation.value.push(locationInfo?.name)
		} else {
			showLocation.value.push(selectedCity?.name)
			contentDetails.longitude = selectedCity?.location?.longitude
			contentDetails.latitude = selectedCity?.location?.latitude
		}
	})
	/* #endif */
	const getLocation = async () => {
		let referer = 'aaa';
		const hotCitys = '北京,上海,天津,重庆,广州,深圳,成都,杭州'
		let endPoint = JSON.stringify({ //终点
			'name': '',
			'latitude': '',
			'longitude': '',
		});
		wx.navigateTo({
			url: `plugin://citySelector/index?key=${MAP_KEY}&referer=${referer}&hotCitys=${hotCitys}`,
		})
	}
	const publish_note = async () => {
		contentDetails.articleCover = fileList.value[0]?.url
		contentDetails.articleMainPic = fileList.value?.slice(1).map((item) => item.url)
		await articleStore.articleInsert({
			...contentDetails
		})
		uni.showModal({
			content: '发布成功',
			showCancel: false,
			confirmText: '返回首页',
			confirmColor: '#b2b2b2',
			success: () => {
				uni.switchTab({
					url: "/pages/tab-index/index"
				})
			}
		})
	}
	// 获取选择的店铺的名称
	const selectorClick = (idx) => {
		let shopId = shopStore.shopInfoData.shopList.find((item) => item.storeName === candidates.value[idx]).id
		contentDetails.shopId = shopId
	}
	// 选择Label
	const active = ref(0)
	const checkLable = (labelName, key) => {
		active.value = key
		contentDetails.articleLabel = labelName
	}
		
	const current = ref(0)
	const currentChild = ref(0)
	const tagLibraryStore = useTagLibraryStore()
	onMounted(async () => {
		await tagLibraryStore.articleList()
		await tagLibraryStore.articleAllList()
		swichMenu(current.value, Object.keys(tagLibraryStore?.contentTagList?.articleAllList)[current.value])
	})
	const labelList = computed(() => {
		return Object.keys(tagLibraryStore?.contentTagList?.articleAllList)
	})
	
	const labelChildList = ref(null)
	const chooseLabellist = ref('')
	const chooseChildLabellist = ref('')
	const swichMenu = (index, tagName) => {
		chooseLabellist.value = ''
		current.value = index;
		labelChildList.value = tagLibraryStore?.contentTagList?.articleAllList[tagName].map((label) => {
			return label.tagLibraryBO.tagName
		})
		chooseLabellist.value = tagName
		// console.log(chooseLabellist.value, "| chooseLabellist----");
		swichChildMenu(currentChild.value)
	}
	
	const swichChildMenu = (index) => {
		chooseChildLabellist.value = ''
		chooseChildLabellist.value = labelChildList.value[index]
		// console.log(chooseChildLabellist.value, "| chooseChildLabellist---=");
		currentChild.value = index;
	}
</script>

<style lang="scss" scoped>
	.issue {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 0 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.content {
			width: 100%;
			height: auto;
			padding-bottom: 180rpx;
		}

		.title {
			position: relative;
			margin-top: 20rpx;
			height: 60rpx;
			font-size: 34rpx;
			color: #6D6D6D;
			border-bottom: 1px solid #D2D2D2;

			input {
				width: 100%;
				height: 48rpx;
				line-height: 48rpx;
			}
		}

		textarea {
			width: 100%;
			margin-top: 40rpx;
			font-weight: 400;
			font-size: 26rpx;
			color: #9D9D9D;
			line-height: 36rpx;
			color: #9D9D9D;
		}

		.topic {
			display: flex;
			flex-direction: column;
			margin-bottom: 60rpx;

			.topic_mark {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

			}

			.topic_label {
				height: 50vh;
				// text {
				// 	display: inline-block;
				// 	background-color: #F4F4F4;
				// 	margin: 10rpx;
				// 	padding: 10rpx 20rpx;
				// 	border-radius: 30rpx;
				// 	font-size: 24rpx;
				// 	color: #6D6D6D;
				// 	&.active {
				// 		background-color: #FF4D65;
				// 		color: #fff;
				// 	}
				// }
			}
		}

		.local {
			display: flex;
			flex-direction: column;
			margin-top: 20rpx;
			margin-bottom: 40rpx;

			.local_mark {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.local_position {
					display: flex;
					align-items: center;

					text {
						margin-left: 10rpx;
						color: #222222;
						font-size: 24rpx;
						font-weight: bold;
					}
				}
			}

			.local_label {
				margin-top: 20rpx;
				margin-bottom: 40rpx;

				text {
					background-color: #F4F4F4;
					color: #6D6D6D;
					margin: 10rpx;
					padding: 10rpx 20rpx;
					border-radius: 30rpx;
					font-size: 24rpx;
				}
			}
		}

		.btn {
			width: 90%;
			background: rgb(254, 92, 113);
			color: white;
			position: fixed;
			left: 30rpx;
			z-index: 99;
		}

		.pupop-box {
			height: 50vh;
		}
	}
	
	.u-wrap {
		height: calc(100vh);
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
		display: flex;
		flex-direction: column;
	}
	
	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}
	
	.u-tab-view {
		width: 200rpx;
		height: 100%;
	}
	
	.u-tab-item {
		height: 110rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}
	.u-tab-child-item {
		height: 110rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #444;
		font-weight: 400;
		line-height: 1;
	}
	.u-tab-item-active {
		position: relative;
		color: #FE5C71;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}
	
	.u-class-item-active {
		position: relative;
		color: #000;
		font-size: 30rpx;
		font-weight: 600;
		background: #fff;
	}
	
	.u-class-item-active::before {
		content: "";
		position: absolute;
		border-left: 4px solid $u-primary;
		height: 32rpx;
		left: 0;
		top: 39rpx;
	}
	
	.u-tab-view {
		height: 100%;
	}
	
	.page-view {
		height: 100%;
		padding: 16rpx;
		background: #fff;
	}
	
	.item-title {
		font-size: 26rpx;
		color: $u-main-color;
		font-weight: bold;
	}
	.topic :global(.u-popup__content) {
		border-radius: 20rpx 20rpx 0 0;
		background-color: #f7f7f7!important;
	}
	.choose-label {
		margin-bottom: 10rpx;
		text {
			background-color: #F4F4F4;
			padding: 10rpx 20rpx;
			border-radius: 30rpx;
			font-size: 24rpx;
			color: #6D6D6D;
		}
	}
</style>